<template>
    <el-dialog title="详情" :close-on-click-modal="false" :visible.sync="visible">
        <el-form label-width="80px">
            <el-form-item label="用户名：">{{ dataForm.userName }} </el-form-item>
            <el-form-item label="邮箱：">{{ dataForm.email }} </el-form-item>
            <el-form-item label="手机号：">{{ dataForm.mobile }} </el-form-item>
            <el-form-item label="角色：">{{ dataForm.roleStr }} </el-form-item>
            <el-form-item label="部门：">{{ dataForm.deptStr }} </el-form-item>
            <el-form-item label="状态：">{{ dataForm.statusStr }} </el-form-item>
        </el-form>
    </el-dialog>

</template>

<script>
    export default {
        data() {
            return {
                visible: false,
                dataForm: {
                    id: 0,
                    userName: '',
                    password: '',
                    salt: '',
                    email: '',
                    mobile: '',
                    status: 1,
                    roleStr: '',
                    statusStr: '',
                    deptStr: ''
                }
            }
        },
        methods: {
            get(id) {
                this.dataForm.id = id || 0
                if (this.dataForm.id) {
                    this.$http({
                        url: this.$http.adornUrl(`/sys/user/info/${this.dataForm.id}`),
                        method: 'get',
                        params: this.$http.adornParams()
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            this.visible = true
                            this.dataForm.userName = data.user.username
                            this.dataForm.salt = data.user.salt
                            this.dataForm.email = data.user.email
                            this.dataForm.mobile = data.user.mobile
                            this.dataForm.roleIdList = data.user.roleIdList
                            this.dataForm.status = data.user.status
                            this.dataForm.statusStr = data.user.status === 0 ? '禁用' : '启用'
                            this.dataForm.deptStr = data.user.deptStr
                            this.dataForm.roleStr = data.user.roleStrList.join(',')
                        }
                    })
                }
            }
        }
    }
</script>

<style>
    .detail {
        width: 300px;
        margin: 10px 10px 15px 20px;
    }

    .el-form-item {
        font-size: 16px;
        margin-bottom: 0px;
    }
</style>